<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>OnLine Meal Order System</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">

		<!-- Le styles -->
		<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
		<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}

@media ( max-width : 980px) { /* Enable use of floated navbar text */
	.navbar-text.pull-right {
		float: none;
		padding-left: 5px;
		padding-right: 5px;
	}
}
</style>
		<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="jquery/jquery-ui.js"></script>
		<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

		<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
		<!--[if lt IE 9]>
      <script src="bootstrap/js/html5shiv.js"></script>
    <![endif]-->

		<!-- Fav and touch icons -->
		<link rel="apple-touch-icon-precomposed" sizes="144x144"
			href="bootstrap/ico/apple-touch-icon-144-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114"
			href="bootstrap/ico/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72"
			href="bootstrap/ico/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed"
			href="bootstrap/ico/apple-touch-icon-57-precomposed.png">
		<link rel="shortcut icon" href="bootstrap/ico/favicon.png">

		<script type="text/javascript">
	$(document).ready(function() {
		$("li").click(function() {
			$(this).siblings().removeClass("active");
			$(this).addClass("active");
		});
	});
</script>
	</head>

	<body>
		<div class="navbar navbar-inverse navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container-fluid">
					<button type="button" class="btn btn-navbar" data-toggle="collapse"
						data-target=".nav-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="brand" href="#">OMO System</a>
					<div class="nav-collapse collapse">
						<p class="navbar-text pull-right">
							Logged in as
							<a href="signin.html" class="navbar-link">Username</a>
						</p>
						<ul class="nav">
							<li class="active">
								<a href="#">Home</a>
							</li>
							<li>
								<a href="#about">About</a>
							</li>
							<li>
								<a href="#contact">Contact</a>
							</li>
						</ul>
					</div>
					<!--/.nav-collapse -->
				</div>
			</div>
		</div>

		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span3">
					<div class="well sidebar-nav">
						<ul class="nav nav-list">
						<s:iterator var="cateLog" value="#request.cateLogs" status="status">
						    <li class="nav-header">
						    	<s:property value="#cateLog['cateLogName']"/>
						    </li>
							<s:iterator var="foodType" value="#request.foodTypes" status="status">
								<s:if test="#foodType.foodTypeCatelog.cateLogName == #cateLog.cateLogName">
									<li>
									      <a href="queryFoodAction.do?foodType=<s:property value="#foodType['typeName']"/>"><s:property value="#foodType['typeName']"/></a>
									</li>
							    </s:if>
							</s:iterator>
						</s:iterator>
						</ul>
					</div>
					<!--/.well -->
				</div>
				<!--/span-->
				<div class="span9">
					<!--  -->
					<div class="hero-unit">
					
						<h1>
							special recommendation:<br>
							<s:property value="#request.specialFood.name"/>
						</h1>
						<p>
							This is a template for a simple marketing or informational
							website. It includes a large callout called the hero unit and
							three supporting pieces of content. Use it as a starting point to
							create something more unique.
						</p>
						<p>
							<a href="#" class="btn btn-primary btn-large">Buy Now!
								&raquo;</a>
						</p>
					</div>
					
					<div class="row-fluid">
						<s:iterator var="food" value="#request.foods" status="status">
						    <s:if test="#status.index%3==0">
						       </div>
						       <div class="row-fluid">
						    </s:if>
							<div class="span4">

							<p>
								pic:<s:property value="#food['picPath']"/>
							
							</p>
							<h2>
								name:<s:property value="#food['name']"/>
							</h2>
							<p>
								desc:<s:property value="#food['desc']"/><br />
								price:<s:property value="#food['price']"/>
							</p>
							<p>
							<a class="btn" href="#">Add to Cart</a>
							</p>
						</div><!--/span-->
						</s:iterator>
						
					</div>
					<!--/row-->

				</div>
				<!--/span-->
			</div>
			<!--/row-->

			<hr>

			<footer>
				<p>
					&copy; Company 2013
				</p>
			</footer>

		</div>
		<!--/.fluid-container-->

		<!-- Le javascript
    ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="bootstrap/js/jquery.js"></script>
		<script src="bootstrap/js/bootstrap-transition.js"></script>
		<script src="bootstrap/js/bootstrap-alert.js"></script>
		<script src="bootstrap/js/bootstrap-modal.js"></script>
		<script src="bootstrap/js/bootstrap-dropdown.js"></script>
		<script src="bootstrap/js/bootstrap-scrollspy.js"></script>
		<script src="bootstrap/js/bootstrap-tab.js"></script>
		<script src="bootstrap/js/bootstrap-tooltip.js"></script>
		<script src="bootstrap/js/bootstrap-popover.js"></script>
		<script src="bootstrap/js/bootstrap-button.js"></script>
		<script src="bootstrap/js/bootstrap-collapse.js"></script>
		<script src="bootstrap/js/bootstrap-carousel.js"></script>
		<script src="bootstrap/js/bootstrap-typeahead.js"></script>

	</body>
</html>
